<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>客户管理 / 人员组管理-添加员工到组</title>
  <link rel="stylesheet" href="../../../css/layui.css" media="all">
  <link rel="stylesheet" type="text/css" href="../../../css/common-layer.css"/>
  <link rel="stylesheet" type="text/css" href="../../../zTree/zTreeStyle/zTreeStyle.css"/>
  <link rel="stylesheet" type="text/css" href="../../../css/common.css"/>
  <style>
  	.layui-form-item{margin-bottom: 10px;}
  	.layui-form-select dl{max-height: 187px;}
  	label{width: 175px !important;}
	.layui-form-item .layui-input-inline{width: 250px !important;}
  	#search-tree,#search2-tree{width: 424px;height: 280px;background: #F6F6F6;position: absolute;top: 38px;left: 0;z-index: 9999;overflow: auto;display: none;}
    .tableDiv{width: 300px;}
  </style>
</head>
<body style="background: #fff;overflow-x:hidden ;" class="innerBody">
	<div class="layui-container" style="width: auto; ">  
	  <div class="layui-row">
	    <div class="layui-col-xs4" >
	      <div class="layui-tab" style="padding-left: 15px;">
	        <ul class="layui-tab-title">
	          <li class="layui-this">部门</li>
	          <li>人员组</li>
	        </ul>
	        <div class="layui-tab-content" style="height:280px; overflow-y: auto;">
	          <div class="layui-tab-item layui-show">
				  <ul id="treeDemo2" class="ztree"></ul>
			  </div>
	          <div class="layui-tab-item">
				  <ul id="treeDemo3" class="ztree"></ul>
			  </div>
	        </div>
	      </div>
	    </div>
		<div class="layui-col-xs8" style="border-left: 1px solid #e8e8e8; padding-right: 15px; ">
			<div class="top-btn" style="top: 8px; border-bottom: 1px solid #e8e8e8; padding-bottom: 4px;">
				<div class="search-btn-group layui-form">
					<input type="text"  autocomplete="off" class="layui-input layui-input_" placeholder="请输入编号/姓名">
					<button class="layui-btn layui-btns">查询</button>
				</div>
			</div>
			<div style="margin-left: 10px; margin-top: 20px;">
				<div style="width: 53%; float: left; margin-right: 2%;">
					<div class="bf-tit">
						<span style="line-height: 30px;">待选人员</span>
						<button type="button" class="layui-btn layui-btn-sm" style="float: right;">全部添加</button>
						<div style="clear: both;"></div>
					</div>
					<table id="layui-table" lay-filter="tableBox" class="layui-table"></table>
				</div>
				<div style="width: 45%; float: left; ">
					<div class="bf-tit">
						<span style="line-height: 30px;">已选人员</span>
						<button type="button" class="layui-btn layui-btn-primary layui-btn-sm" style="float: right;">全部移出</button>
						<div style="clear: both;"></div>
					</div>
				    <table id="layui-tablet" lay-filter="tableBox2" class="layui-table"></table>
				</div>
				<div style="clear: both;"></div>
			</div>			
		</div>
	  </div>
	 </div>
	 
	<div class="layui-form-item  window-block-btn">
	  <div class="layui-input-block">
		<button type="button" class="layui-btn layui-btn-primary window-btn" id="canleBtn">取消</button>
		<button type="button" class="layui-btn window-btn" lay-submit="" lay-filter="confirmBtn">提交</button>
	  </div>
	</div>

</body>
<script type="text/html" id="barDemo">
	<a class="" lay-event="move" style="color: #1E9FFF; cursor: pointer;">移入</a>
</script>
<script type="text/html" id="barDemo2">
	<a class="" lay-event="remove" style="color: #FF5722; cursor: pointer;">移出</a>
</script>

<script src="../../../layui.all.js"></script>
<script src="../../../js/common.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="../../../zTree/jquery.ztree.all.js" type="text/javascript"></script>
<script src="../../../zTree/jquery.ztree.exhide-3.5.min.js" type="text/javascript"></script>
<script src="../../../zTree/MtrSearchZTree.js" type="text/javascript"></script>
<script type="text/javascript">
	var setting = {
		view: {
			addHoverDom: addHoverDom,//显示操作图标
			removeHoverDom: removeHoverDom,//移除图标
			selectedMulti: false
		  },
		 data: {
			 simpleData: {
				 enable: true
			 }
		 },
		 callback: {
			 onRename: zTreeOnRename,//修改
			 onRemove: zTreeOnRemove,//删除
			 onClick: zTreeOnClickRight,
			 beforeEditName: beforeEditName,
			 beforeRemove: beforeRemove,
			 beforeRename: beforeRename,
			 onDblClick: myOnDblClick
 
		 },
		 edit: {
			 enable: true,
			 showRemoveBtn: true,
			 showRenameBtn: true,
			 removeTitle: "删除",
			 renameTitle: "修改"
		 }
	};
	var setting2 = {
		check: {
			enable: true
		},
		view: {
			addHoverDom: addHoverDom,//显示操作图标
			removeHoverDom: removeHoverDom,//移除图标
			selectedMulti: false
		  },
		 data: {
			 simpleData: {
				 enable: true
			 }
		 },
		 callback: {
			 onRename: zTreeOnRename,//修改
			 onRemove: zTreeOnRemove,//删除
			 onClick: zTreeOnClickRight,
			 beforeEditName: beforeEditName,
			 beforeRemove: beforeRemove,
			 beforeRename: beforeRename,
			 onDblClick: myOnDblClick
	 
		 },
		 edit: {
			 enable: true,
			 showRemoveBtn: true,
			 showRenameBtn: true,
			 removeTitle: "删除",
			 renameTitle: "修改"
		 }
	};
		
		var zNodes =[
			{ name:"安徽银通物联有限公司", open:true,
				children: [
					{ name:"合肥一中"},
					{ name:"合肥二中"},
					{ name:"合肥三中"},
					{ name:"合肥四中"},
					{ name:"合肥五中"},									
				]},
		];
		
		var log, className = "dark";
		var newCount = 1;
		function addHoverDom(treeId, treeNode) {
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='add node' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
				return false;
			});
		};
		function removeHoverDom(treeId, treeNode) {
			$("#addBtn_"+treeNode.tId).unbind().remove();
		};
		function zTreeOnRename(e, treeId, treeNode, isCancel) {
			showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
		}
		function zTreeOnRemove(e, treeId, treeNode) {
			showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
		}
		function showLog(str) {
			if (!log) log = $("#log");
			log.append("<li class='"+className+"'>"+str+"</li>");
			if(log.children("li").length > 8) {
				log.get(0).removeChild(log.children("li")[0]);
			}
		}
		function getTime() {
			var now= new Date(),
			h=now.getHours(),
			m=now.getMinutes(),
			s=now.getSeconds(),
			ms=now.getMilliseconds();
			return (h+":"+m+":"+s+ " " +ms);
		}
		
		function beforeEditName(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			setTimeout(function() {
				if (confirm("进入节点 '" + treeNode.name + "'编辑状态?")) {
					setTimeout(function() {
						zTree.editName(treeNode);
					}, 0);
				}
			}, 0);
			return false;
		}
		function beforeRemove(treeId, treeNode) {
			className = (className === "dark" ? "":"dark");
			showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
			var zTree = $.fn.zTree.getZTreeObj("treeDemo");
			zTree.selectNode(treeNode);
			return confirm("确认删除'" + treeNode.name + "'节点吗?");
		}
		function beforeRename(treeId, treeNode, newName, isCancel) {
			className = (className === "dark" ? "":"dark");
			showLog((isCancel ? "<span style='color:red'>":"") + "[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name + (isCancel ? "</span>":""));
			if (newName.length == 0) {
				setTimeout(function() {
					var zTree = $.fn.zTree.getZTreeObj("treeDemo");
					zTree.cancelEditName();
					alert("Node name can not be empty.");
				}, 0);
				return false;
			}
			return true;
		}
		// 树的单击事件         
		    function zTreeOnClickRight(event, treeId, treeNode) {
		        var treeid = treeNode.id;
		        $("#hidId").val(treeid);
		
		        $("#ifm").attr("src", "FileView?NodeId=" + treeid);
		    }
		
		    function treeShow(data) {
		        zTreeObj = $.fn.zTree.init($("#test"), setting, data);
		        zTreeObj.expandAll(true);
		    }
	
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo"), setting, zNodes);
			new MtrSearchZTree();
		});
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo2"), setting2, zNodes);
			new MtrSearchZTree();
		});
		$(document).ready(function(){
			$.fn.zTree.init($("#treeDemo3"), setting2, zNodes);
			new MtrSearchZTree();
		});
		function myOnDblClick(event, treeId, treeNode) {
			//第二步            
			 $(".sjbm").val(treeNode.name);
		     $("#search-tree").hide();       
		}
	 //主动加载jquery模块
	layui.use(['jquery', 'layer','laydate'], function(){
		var $ = layui.jquery //重点处
		,layer = layui.layer
		,laydate = layui.laydate;
		table = layui.table;//表格，注意此处table必须是全局变量
		
		laydate.render({
			elem: '#date',
			trigger: 'click' ,//采用click弹出
			range: true
	  });
	  
	  table.render({
	     elem: '#layui-table'
	     ,url:'../../../tableJson.js'
	     ,height:'full-170'
	     ,cols: [[
	  		{field: 'pc', title: '编号'}
	       ,{field: 'name', title: '姓名'}
	       ,{field: 'department', title: '所在部门'}
	       ,{fixed: 'right', title:'操作', toolbar: '#barDemo'}
	     ]]
	  });
	  
	  //补助失败表格
	  	table.render({
	     elem: '#layui-tablet'
	     ,url:'../../../tableJson.js'
	     ,height:'full-170'
	     ,cols: [[
	     	{field: 'pc', title: '编号'}
	       ,{field: 'name', title: '姓名'}
	       ,{fixed: 'right', title:'操作', toolbar: '#barDemo2'}
	     ]]
	  });
	  
		//得到父页面的值
		var index = (window.parent.index_);
		var id = (window.parent.id_);
		console.log(id);
		layui.use('form', function(){  
		 	var form = layui.form;
		 	//------表单提交-------
			form.on('submit(confirmBtn)', function (data) {
			    var obj = data.field;
			    console.log(obj);
			    //以下是ajax
			    
			    /*添加成功之后，关闭弹窗，刷新父页面*/
			    parent.layer.close(index);//关闭layer
			    $('#iframe',parent.document).attr('src', 'html/sys-mgt/sysLegal-mgt/sysLegal-mgt.html');
			});
			//取消
			$("body").on("click","#canleBtn",function(){
				parent.layer.close(index);//关闭layer
			})
			
		})	
	})
   
</script>
</html>